<template>
  <div>
    <codemirror v-model="code" :options="cmOptions" class="code-edit" />
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// 主题
import 'codemirror/theme/dracula.css'
// mode
import 'codemirror/mode/javascript/javascript.js'
// 代码折叠
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/foldgutter.css'
// 活动行背景高亮
import 'codemirror/addon/selection/active-line.js'
// 代码提示
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/javascript-hint.js'
export default {
  name: 'CodeEdit',
  components: { codemirror },
  data() {
    return {
      code: 'function findSequence(goal) {\n' +
          '  function find(start, history) {\n' +
          '    if (start == goal)\n' +
          '      return history;\n' +
          '    else if (start > goal)\n' +
          '      return null;\n' +
          '    else\n' +
          '      return find(start + 5, "(" + history + " + 5)") ||\n' +
          '             find(start * 3, "(" + history + " * 3)");\n' +
          '  }\n' +
          '  return find(1, "1");\n' +
          '}',
      cmOptions: {
        mode: 'text/javascript',
        theme: 'dracula',
        lineNumbers: true,
        styleActiveLine: false,
        line: true,
        foldGutter: true,
        readOnly: 'nocursor',
        extraKeys: { 'Ctrl': 'autocomplete' },
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
      }
    }
  }
}
</script>

<style lang="less">
  .code-edit{
    pre{
      font-size: 14px;
      line-height: 20px;
    }
  }
</style>
